<template>
	<view class="category" v-if="category">{{ category }}</view>
	<up-grid
		:border="false"
		col=4
	>
		<up-grid-item
			v-for="(item, index) in menu"
			:key="index"
			@click="handleItemClick(item)"
		>
			<up-image :src="item.icon" height="70rpx" mode="heightFix"></up-image>
			<view class="grid-text">{{ item.name }}</view>
		</up-grid-item>
	</up-grid>
</template>

<script>
	export default {
		props: {
			menu: {
				type: Array,
				default: () => []
			},
			category: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			handleItemClick(row) {
				console.log(row)
				uni.navigateTo({
					url: row.url
				})
			}
		}
	}
</script>

<style lang="scss">
.category {
	font-size: 32rpx;
	padding: 30rpx 30rpx 0;
	font-weight: bold;
}

.grid-text {
	font-size: 28rpx;
	text-align: center;
	padding: 0 10rpx;
}

</style>